<template>
  <!-- 分组管理 -->
  <div class="content">
    <div class="box">
      <div class="select" v-if="flag">
        <div
          style="
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 400px;
            margin-right: 40px;
            margin-left: 40px;
          "
        >
          <div style="width: 100px; color: #777">标签名称:</div>
          <el-input
            placeholder="请输入内容"
            size="small"
            v-model="input1"
            clearable
          >
          </el-input>
        </div>
        <div
          style="
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 400px;
            margin-right: 100px;
          "
        >
          <div style="width: 50px; color: #777">状态:</div>
          <el-select
            v-model="input2"
            size="small"
            clearable
            placeholder="请选择"
            style="width: 400px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="btn">
          <el-button size="small" type="primary" @click="selectClick">
            <i class="el-icon-search"></i>
            <span>搜索</span>
          </el-button>
          <el-button size="small" @click="clearClick">
            <i class="el-icon-delete"></i>
            <span>清空</span>
          </el-button>
        </div>
      </div>
      <div class="add">
        <div class="addbtn">
          <el-button type="primary" @click="addClick">
            <i class="el-icon-plus"></i>
            <span>新增</span>
          </el-button>
        </div>
        <div class="refresh">
          <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
          <el-button icon="el-icon-search" circle @click="select"></el-button>
        </div>
      </div>
      <div class="table">
        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          border
          :header-cell-style="{ color: '#000' }"
        >
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column property="title" label="标签名称" align="center">
          </el-table-column>
          <el-table-column property="status" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status == 0 ? 'danger' : 'primary'"
                disable-transitions
                >{{ scope.row.status == 0 ? "禁用" : "正常" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column property="isDefault" label="默认类型" align="center">
            <template slot-scope="scope">
              <el-tag disable-transitions>{{
                scope.row.isDefault == 0 ? "自定义类型" : "默认类型"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column property="seq" label="排序" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                ><i class="el-icon-edit"></i>编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                ><i class="el-icon-delete"></i>删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="solt">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <div class="addFrom">
        <el-dialog title="新增" :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="form" label-width="80px">
            <el-form-item
              label="标签名称"
              prop="title"
              :label-width="formLabelWidth"
            >
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-radio-group v-model="form.status">
                <el-radio :label="1" :aria-hidden="false">正常</el-radio>
                <el-radio :label="0" :aria-hidden="false">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="列表样式" :label-width="formLabelWidth">
              <el-radio-group v-model="form.style">
                <el-radio :label="0" :aria-hidden="false">一列一个</el-radio>
                <el-radio :label="1" :aria-hidden="false">一列两个</el-radio>
                <el-radio :label="2" :aria-hidden="false">一列三个</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排序" :label-width="formLabelWidth">
              <el-input-number
                v-model="form.seq"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveClick">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
  
  <script>
import {
  getClass,
  selectClass,
  addTeam,
  deleteTeam,
  editTeam,
} from "@/api/dyd.js";
export default {
  data() {
    return {
      input1: "",
      input2: "",
      flag: true,
      tableData: [],
      currentRow: null,
      currentPage4: 4,
      current: 1,
      size: 10,
      total: null,
      options: [
        {
          value: 0,
          label: "禁用",
        },
        {
          value: 1,
          label: "正常",
        },
      ],
      // 新增表单
      dialogFormVisible: false,
      form: {
        title: "",
        status: null,
        style: null,
        seq: null,
      },
      formLabelWidth: "120px",
      rules: {
        title: [
          { required: true, message: "标签名称不能为空", trigger: "blur" },
        ],
      },
      flag: 1,
      row: null,
    };
  },
  methods: {
    // 新增提交 编辑保存
    saveClick() {
      if (this.flag == 1) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            addTeam({
              ...this.form,
              t: Date.now(),
              id: 0,
              isDefault: null,
              prodCount: null,
              shopId: null,
            }).then((res) => {
              if (res.code === "00000") {
                this.$message.success("添加成功！");
                this.dialogFormVisible = false;
                this.getdata();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            console.log("表单验证失败");
          }
        });
      } else {
        console.log(this.form, this.row);
        this.$refs.form.validate((valid) => {
          if (valid) {
            editTeam({
              ...this.row,
              ...this.form,
            }).then((res) => {
              console.log(res);
              if (res.code == "00000") {
                this.$message.success("修改成功!");
                this.dialogFormVisible = false;
                this.getdata();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            console.log("表单验证失败");
          }
        });
      }
    },
    // 添加
    addClick() {
      this.dialogFormVisible = true;
      (this.form = {
        title: "",
        status: null,
        style: null,
        seq: null,
      }),
        this.flag;
    },
    // 清空
    clearClick() {
      this.input1 = "";
      this.input2 = "";
    },
    // 搜索
    selectClick() {
      let t = Date.now();
      console.log(t);
      console.log(this.input1, this.input2);
      selectClass({
        t: t,
        current: this.current,
        size: this.size,
        title: this.input1,
        status: this.input2,
      }).then((res) => {
        if (res.code == "00000") {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    // 获取初始数据
    getdata() {
      let t = Date.now();
      getClass({
        t: t,
        current: this.current,
        size: this.size,
        title: this.input1,
        status: this.input2,
      }).then((res) => {
        if (res.code == "00000") {
          this.total = res.data.total;
          this.tableData = res.data.records;
          console.log(this.tableData);
        }
      });
    },
    // 分页器操作
    handleSizeChange(val) {
      this.size = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getdata();
    },
    // 表格编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.flag = 2;
      this.form = {
        title: row.title,
        status: row.status,
        style: row.style,
        seq: row.seq,
      };
      this.row = row;
    },
    // 表格删除
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteTeam(
            {
              t: Date.now(),
            },
            row.id
          ).then((res) => {
            if (res.code == "00000") {
              this.$message.success("删除成功");
              this.getdata();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    select() {
      this.flag = !this.flag;
    },
    refresh() {
      this.tableData = [];
      this.size = 10;
      this.current = 1;
      this.getdata();
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
  },
  created() {
    this.getdata();
  },
};
</script>
  
  <style scoped>
.content {
  background-color: #f1f1f1;
  padding: 20px;
}
.box {
  padding: 20px;
  background-color: #fff;
}
.select {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.add {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.solt {
  text-align: right;
  margin-top: 20px;
}
</style>